<template>
  <div>
    <el-container>
      <el-header>
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/ssss' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>商品管理</el-breadcrumb-item>
          <el-breadcrumb-item>商品分类</el-breadcrumb-item>
        </el-breadcrumb>
      </el-header>
      <el-main>
        <el-button type="primary" @click="dialogFormVisible = true"
          >添加分类</el-button
        >
        <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="分类名称" :label-width="formLabelWidth">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="父级分类" :label-width="formLabelWidth">
              <el-cascader
                :options="options"
                :props="prpos"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible = false"
              >确 定</el-button
            >
          </div>
        </el-dialog>

        <el-table :data="list" border style="width: 100%">
          <el-table-column prop="" label="#">
            <template slot-scope="{ $index }">
              {{ $index + 1 }}
            </template>
          </el-table-column>
          <el-table-column prop="cat_name" label="分类名称">
            <!-- <template slot-scope="{ row }">
              {{ row }} -->
            <!-- <el-tree
                :data="list"
                :props="defaultProps"
                @node-click="handleNodeClick"
                icon-class="el-icon-plus"
              ></el-tree> -->
            <!-- </template> -->
          </el-table-column>
          <el-table-column prop="province" label="是否有效">
            <template slot-scope="{ row }">
              <i class="el-icon-check" v-if="!row.cat_deleted"></i>
              <i class="el-icon-close" v-else></i>
            </template>
          </el-table-column>
          <el-table-column prop="city" label="排序">
            <template slot-scope="{ row }">
              <el-tag v-if="row.cat_level == '0'">一级</el-tag>
              <el-tag type="success" v-else-if="row.cat_level == '1'"
                >二级</el-tag
              >
              <el-tag type="warning" v-else>三级</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="primary"
                @click="handleClick(scope.row)"
                icon="el-icon-edit"
                >编辑</el-button
              >
              <!-- <el-button type="text" size="small">删除</el-button> -->
              <el-button type="danger" icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { huoQuCategoriesA } from '@/api/goodsAdd'
export default {
  name: 'CategoriesA',
  data () {
    return {
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'cat_name'
      },
      tableData: [{
        date: '2016-05-02',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1518 弄',
        zip: 200333
      }, {
        date: '2016-05-04',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1517 弄',
        zip: 200333
      }, {
        date: '2016-05-01',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1519 弄',
        zip: 200333
      }, {
        date: '2016-05-03',
        name: '王小虎',
        province: '上海',
        city: '普陀区',
        address: '上海市普陀区金沙江路 1516 弄',
        zip: 200333
      }],
      list: [],
      dialogFormVisible: false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      list1: [],
      popos: { checkStrictly: true, children: 'children', },
      formLabelWidth: '120px',
      currentPage: 1,
      total: 0,
      obj: {
        pagenum: 1,
        pagesize: 5
      }
    }
  },
  created () {
    this.huoquCategories()
  },
  computed: {
  },
  methods: {
    handleNodeClick (data) {
      console.log(data);
    },
    async huoquCategories () {
      const res = await huoQuCategoriesA(this.obj)
      console.log(res);
      this.total = res.data.total
      this.list = res.data.result
    },
    handleClick (row) {
      console.log(row);
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`);
      this.obj.pagesize = val
      this.huoquCategories()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`);
      this.obj.pagenum = val
      this.huoquCategories()
    }

  }
}
</script>
<style lang='less'  scoped>
</style>
